<template>
	<view class="monitor-panel">
		<text class="top-title">快捷方式</text>
		<!-- 第一行：突出上新监测 -->
		<view
				class="feature-item"
				@tap="sheep.$router.go('/pages/index/addMonitorTask')"
		>
			<image
					class="feature-icon"
					:src="sheep.$url.static(orderList[0].icon)"
					mode="aspectFit"
			></image>
			<view class="feature-title">{{ orderList[0].title }}</view>
		</view>

		<!-- 第二行：其他 3 个功能平均排列 -->
		<!--<view class="other-items">
			<view
					v-for="(item, index) in otherOrderList"
					:key="index"
					class="item"
					@tap="sheep.$router.go(item.path)"
			>
				<image
						:src="sheep.$url.static(item.icon)"
						class="item-icon"
						mode="aspectFit"
				></image>
				<view class="item-title">{{ item.title }}</view>
			</view>
		</view>-->
	</view>
</template>

<script setup>
import { onLoad } from '@dcloudio/uni-app';
import { computed, reactive } from 'vue';
import { isEmpty } from 'lodash';
import sheep from "@/sheep";

const orderList = [
	{
		title: '新建上新监测',
		value: '1',
		icon: 'https://ribotrade-oss.oss-cn-beijing.aliyuncs.com/2025/01/13eaf29a0a51a942a2aec480c23e9c1f7f60ec7d88-be8c-47f5-a7f6-e2043269ad6f.jpeg',
		path: '/pages/index/monitorTask',
		type: 'purchase',
	},
	{
		title: '降价监测',
		value: '2',
		icon: 'https://ribotrade-oss.oss-cn-beijing.aliyuncs.com/2025/01/138d667cb8367b4d769f89b5716637060b下降趋势.png',
		path: '/pages/order/list',
		type: 'purchaseSuccess',
	},
	{
		title: '下架监测',
		value: '3',
		icon: 'https://ribotrade-oss.oss-cn-beijing.aliyuncs.com/2025/01/13d30d8516bdb64b7caae3c90aa3dbf2cd下架.png',
		path: '/pages/order/list',
		type: 'complete'
	},
	{
		title: '自助留言',
		value: '4',
		icon: 'https://ribotrade-oss.oss-cn-beijing.aliyuncs.com/2025/01/13d4ac7d1ee79441ddbb67966fd3e3f753w_留言.png',
		path: '/pages/order/list',
		type: 'back'
	},
];

// 第一项“上新监测”突出显示，其他三个平均排列
const otherOrderList = orderList.slice(1);
</script>

<style scoped lang="scss">
.monitor-panel {
	display: flex;
	flex-direction: column;
	margin-bottom: 20rpx;
	background: linear-gradient(0deg, #3E3A39, #3E3A39, #3E3A39);
	border-radius: 24rpx;
	padding: 32rpx;
	box-shadow: 0 8rpx 24rpx rgba(0,0,0,0.2);
	color: #fff;
}

/* 第一行：突出上新监测 */
.feature-item {
	display: flex;
	flex-direction: column;
	align-items: center;
	margin-bottom: 30rpx;
	padding: 30rpx;
	background: #F39800;
	border-radius: 20rpx;
	animation: fadeIn 0.3s ease-in-out;

	.feature-icon {
		width: 80rpx;
		height: 80rpx;
		margin-bottom: 10rpx;
		border-radius: 10rpx;
		transition: transform 0.2s;
	}

	.feature-title {
		font-size: 30rpx;
		font-weight: bold;
		color: #ffffff;
	}

	&:hover .feature-icon {
		transform: scale(1.1);
	}
}

/* 第二行：其他 3 个功能平均排列 */
.other-items {
	display: flex;
	justify-content: space-between;
	align-items: center;
}

.item {
	flex: 1;
	margin: 0 10rpx;
	display: flex;
	flex-direction: column;
	align-items: center;
	background: rgba(255,255,255,0.1);
	border-radius: 20rpx;
	padding: 20rpx;
	animation: fadeIn 0.3s ease-in-out;

	.item-icon {
		width: 60rpx;
		height: 60rpx;
		margin-bottom: 10rpx;
		border-radius: 10rpx;
		transition: transform 0.2s;
	}

	.item-title {
		font-size: 26rpx;
		color: #ffffff;
	}

	&:hover .item-icon {
		transform: scale(1.1);
	}
}

/* 简单的动画示例 */
@keyframes fadeIn {
	0% {
		opacity: 0;
		transform: translateY(10rpx);
	}
	100% {
		opacity: 1;
		transform: translateY(0);
	}

}

.top-title {
	margin-bottom: 40rpx;
	font-weight: bold;
	font-size: 30rpx
}
</style>
